সার্ভিস-ভিত্তিক কমিউনিকেশন

Web Development - অ্যাঙ্গুলার (Angular) - কম্পোনেন্ট ইন্টারঅ্যাকশন |

Angular অ্যাপ্লিকেশনে সার্ভিস-ভিত্তিক কমিউনিকেশন একটি সাধারণ প্যাটার্ন যা বিভিন্ন কম্পোনেন্টের মধ্যে ডেটা বা তথ্য শেয়ার করতে ব্যবহৃত হয়। এই প্যাটার্নে সার্ভিসগুলোকে ডেটা শেয়ারিং, ব্যবসায়িক লজিক এবং অ্যাপ্লিকেশন স্টেট ম্যানেজমেন্ট এর জন্য ব্যবহৃত হয়। Angular-এর সার্ভিসগুলি সাধারণত Single Responsibility Principle অনুসরণ করে এবং কম্পোনেন্টের থেকে আলাদা হয়ে তাদের নিজস্ব ফাংশনালিটি পরিচালনা করে।

সার্ভিস-ভিত্তিক কমিউনিকেশন মূলত Angular অ্যাপ্লিকেশনের মধ্যে কম্পোনেন্ট-কম্পোনেন্ট কমিউনিকেশন বা ডেটা শেয়ারিং পরিচালনা করতে ব্যবহৃত হয়, যা একটি পরিষ্কার, কার্যকরী এবং মেইনটেইনযোগ্য আর্কিটেকচার গঠন করতে সাহায্য করে।

সার্ভিস তৈরি করা

Angular-এ সার্ভিস তৈরি করতে @Injectable() ডেকোরেটর ব্যবহার করা হয়। এটি নির্দেশ করে যে সার্ভিসটি Dependency Injection সিস্টেমের মাধ্যমে অন্য কম্পোনেন্ট বা সার্ভিসে ইনজেক্ট করা যাবে।

সার্ভিস উদাহরণ:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'  // সার্ভিসটি অ্যাপ্লিকেশন সারা জুড়ে উপলব্ধ হবে
})
export class DataService {
  constructor(private http: HttpClient) {}

  // API থেকে ডেটা ফেচ করা
  fetchData(): Observable<any> {
    return this.http.get('https://api.example.com/data');
  }
}

এখানে, DataService একটি সার্ভিস যা HTTP ক্লায়েন্ট ব্যবহার করে সার্ভার থেকে ডেটা ফেচ করার জন্য তৈরি করা হয়েছে। @Injectable() ডেকোরেটরের মাধ্যমে সার্ভিসটি root লেভেলে প্রদান করা হয়েছে, যার মানে হলো এটি অ্যাপ্লিকেশনটির সমস্ত কম্পোনেন্টে পাওয়া যাবে।

সার্ভিস ইনজেকশন

একটি কম্পোনেন্টে সার্ভিস ইনজেক্ট করতে constructor() মেথডের মাধ্যমে সার্ভিসটি ইনজেক্ট করা হয়। Angular-এর Dependency Injection (DI) সিস্টেম সার্ভিসকে স্বয়ংক্রিয়ভাবে ইনজেক্ট করে।

উদাহরণ: সার্ভিস ইনজেক্ট করা

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';  // DataService ইম্পোর্ট করা

@Component({
  selector: 'app-data-display',
  templateUrl: './data-display.component.html',
})
export class DataDisplayComponent implements OnInit {
  data: any;

  constructor(private dataService: DataService) {}  // DataService ইনজেক্ট করা

  ngOnInit() {
    this.dataService.fetchData().subscribe(response => {
      this.data = response;
      console.log(this.data);
    });
  }
}

এখানে, DataDisplayComponent কম্পোনেন্টে DataService ইনজেক্ট করা হয়েছে, এবং কম্পোনেন্টের ngOnInit() মেথডে fetchData() মেথড কল করা হয়েছে, যাতে অ্যাসিঙ্ক্রোনাসভাবে ডেটা ফেচ করা যায়।

কম্পোনেন্ট-কম্পোনেন্ট কমিউনিকেশন

একটি সার্ভিসের মাধ্যমে দুই বা তার বেশি কম্পোনেন্টের মধ্যে ডেটা শেয়ার করা যায়। এটি দুইটি উপায়ে করা যায়:

শেয়ারড সার্ভিসের মাধ্যমে ডেটা শেয়ার করা: এক কম্পোনেন্টে ডেটা আপডেট করলে অন্য কম্পোনেন্টগুলো সেটি দেখতে পায়।
Subject/BehaviorSubject ব্যবহার করে রিয়্যাক্টিভ ডেটা শেয়ার করা: Subject বা BehaviorSubject ব্যবহার করে কম্পোনেন্টগুলোর মধ্যে ডেটা বা ইভেন্ট শেয়ার করা যায়, যা RxJS স্ট্রিমের মাধ্যমে কাজ করে।

উদাহরণ: Subject এর মাধ্যমে ডেটা শেয়ার করা

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CommunicationService {
  private messageSource = new BehaviorSubject<string>('Initial message');
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

এখানে, BehaviorSubject ব্যবহার করে একটি সার্ভিস তৈরি করা হয়েছে, যা একটি message স্টোর করে এবং অন্য কম্পোনেন্টে ডেটা পাঠায় যখন সেটি পরিবর্তিত হয়।

কম্পোনেন্ট ১: মেসেজ আপডেট করা

import { Component } from '@angular/core';
import { CommunicationService } from './communication.service';

@Component({
  selector: 'app-message-sender',
  template: `<button (click)="newMessage()">Change Message</button>`
})
export class MessageSenderComponent {

  constructor(private communicationService: CommunicationService) {}

  newMessage() {
    this.communicationService.changeMessage('Hello from Sender!');
  }
}

কম্পোনেন্ট ২: মেসেজ গ্রহণ করা

import { Component, OnInit } from '@angular/core';
import { CommunicationService } from './communication.service';

@Component({
  selector: 'app-message-receiver',
  template: `<p>{{message}}</p>`
})
export class MessageReceiverComponent implements OnInit {
  message: string;

  constructor(private communicationService: CommunicationService) {}

  ngOnInit() {
    this.communicationService.currentMessage.subscribe(msg => {
      this.message = msg;
    });
  }
}

এখানে, MessageSenderComponent যখন একটি নতুন মেসেজ পাঠায়, তখন MessageReceiverComponent সেটি গ্রহণ করে এবং UI-তে রেন্ডার করে।

সার্ভিসের অন্যান্য ব্যবহার

অ্যাপ্লিকেশন স্টেট ম্যানেজমেন্ট: সার্ভিস ব্যবহার করে অ্যাপ্লিকেশন স্টেট সংরক্ষণ করা যায়, যেমন লগইন স্টেট, ইউজার তথ্য ইত্যাদি।
অথেনটিকেশন ও অথরাইজেশন: সার্ভিস ব্যবহার করে লগইন তথ্য ম্যানেজ করা এবং প্রিভিলেজ-ভিত্তিক অ্যাক্সেস কন্ট্রোল তৈরি করা যায়।
এপিআই কল ম্যানেজমেন্ট: HTTP সার্ভিস ব্যবহার করে API কল পরিচালনা করা এবং সার্ভার থেকে ডেটা ফেচ করা।